<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DEMO</title>
	<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
	<style>
		*{margin:0;padding:0;-webkit-font-smoothing:antialiased}#messages{list-style-type:none;margin:0;overflow:auto;overflow-x:hidden}#messages,li p{word-wrap:break-word}li p{margin-left:56px}.header{text-align:center;color:#eee;font-weight:200;font-size:24px;margin:60px}.test{box-shadow:0 2px 3px rgba(0,0,0,.1);-webkit-box-shadow:2px 2px 5px #333;box-shadow:2px 2px 5px #333}.main{background-color:#fff}.main,.main_header{border-radius:4px 4px 0 0}.main_header{background-color:#eee;margin:0;color:#666;padding:2px 0;font-size:12px}.main_header,.qrcode{text-align:center}.qrcode img{width:160px;border-radius:10px;height:160px}#messages{padding:8px;background-color:#000;color:#dc3545;text-align:left;font-size:12px;height:100%}.gray{color:#666}.green{color:green}.blue{color:#007bff}.yellow{color:#ffc107}.center{text-align:center}.gray a{text-decoration:none}.test{max-width:800px;margin: 0 auto;}

		.content-container{
			width: 100%;
		}

		.window-container{
			min-width: 200px;
			max-width: 600px;
			margin: 20px auto;
		}

		.call-windows{
			border: 1px solid #ededed;
			width: 150px;
			z-index: 999;
			display: none;
			text-align: center;
			float: left;
			margin-top: 20px;
		}
		.mask{
			background: rgba(0,0,0,.6);
			width: 100%;
			height: 100%;
			z-index: 998;
			display: none;
		}
		.call-now{
			font-size: 14px;
			text-align: center;
			transition: move 2s;
			padding-top: 15px;
		}
		@keyframes move {
			0%{
				padding-left:-10px;
			}
			30%{
				padding-left: 0px;
			}
			60%{
				padding-left: 0px;
				padding-right: 10px;
			}
			100%{
				padding-left: 0px;
				padding-right: 0px;
			}
		}
		.refuse-btn{
			background: red;
			width: 80px;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			border: none;
			margin: 20px auto 20px auto;
			display: block;
			color: white;
		}
	</style>
</head>
<body>
<div class="mask"></div>
<div class="content-container">
	<div class="window-container">

	</div>
</div>


<div class="main">
	<div class="test">
		<div class="main_header">websocket演示</div>
		<ul id="messages" style="min-height: 380px; height: 380px;">
		</ul>
	</div>
</div>

</body>
<script>
	//这里的ip地址改为自己服务器的ip地址
	var ws = new WebSocket('ws://127.0.0.1:1234');
	var uid = '<?php echo $uuid;?>';
	ws.onopen = function(){
		ws.send(uid);
		var html = '<li><span class="yellow">已连接</span></li>';
		$("#messages").append(html);
	};
	ws.onmessage = function(e){
		var message_info = JSON.parse(e.data)
		var html = '<li><span class="blue">'+JSON.stringify(message_info)+'</span></li>';
		$("#messages").append(html);
		if(message_info && message_info.uid == uid){
			getList();
		}
	};

	function getList() {
		$.get('/index/bedside/getAnswerList?callTo='+uid,function (res){
			var _html = '';
			if(res && res.data){
				let data = res.data;
				for(var i=0;i<data.length;i++){
					_html += '<div class="call-windows" style="margin-right: 10px">' +
							'<p class="call-now">正在呼叫...</p>' +
							'<button class="refuse-btn">拒绝</button>' +
							'</div>';
				}
				$('.window-container').empty().html(_html);
				$('.mask').show();
				$('.call-windows').show();
			}

		},'json');
	}

</script>
</html>